<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 12:36:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-11-02 19:01:16
-->
<template>
  <!--存在在template标签只允许存在一个根标签-->
  <div>
   <!--頭部-->
   <!--
     1.創建一個公共組件
     1.引入到使用devue頁面中
     2.註冊組件
     3.

   -->
   <Header></Header>
   <!--/頭部-->

    <!--体部-->
    <div class="content">
      <!--轮播图-->
      
     <!-- {{carousels}}-->
      <div class="carousel">
        <el-carousel  height="300px">
        <el-carousel-item v-for="item in carousels" :key="item.id">
       <img :src="item.url" alt="">
        </el-carousel-item>
      </el-carousel>
      </div>
      <!--板块-->
      <div class="plates">
        <div class="wrapper">
          <div class="plate" v-for="cas in categorylist" :key="cas.category.id">
            <div class="head">
              <div class="title"  >{{cas.category.name}}</div>
              <div class="more"  >更多&gt;&gt;</div>
            </div>
            <ul class="list"   >
              <li v-for="a in cas.aritcle" :key="a.id">{{a.title}}</li>
              <!--<li >
                关于组织集中观看2021丝绸之路农业教育科技创新联盟合作论坛的通知
              </li>
              
              <li>关于组织申报2022年度科技成果转化引导专项项目的通知</li>
              <li>《山西日报》刊发我校常明昌教授学习习近平总书记给全国高校黄大年式教师团队代表的回信感悟</li>-->
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--/体部-->
    <!--底部-->
    <Footer></Footer>
    <!--/底部-->

  </div>
</template>

<script>
import {get} from '../utils/request'
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
export default{
  //註冊組件
  components:{
       Header,
       Footer
             },
  //存储vue变量
  data(){
    return{
      carousels:[],
      categorylist:[]
      
    };
  },
  
  //vue在各个阶段执行的函数 生命周期 钩子函数
  created(){
    this.loadCarousel();
    this.loadArticle();
    
  },
  //方法 事件处理程序
  methods:{
     toJump(item){
      //跳轉到list頁面 編程路由導航
     // alert(JSON.stringify(item))
      this.$router.push({
        //方跳轉的路徑 和攜帶的參數
        path:'./list',
        query:{item}
      })
    },
    //封装加载文章
    loadArticle(){
      let url='/index/article/findCategoryArticles';
      get(url).then(res=>{
        this.categorylist=res.data;
      })
    },
    // 封装加载轮播图
    loadCarousel(){
    let url="index/carousel/findAll";
    //es6箭头函数 （a）=>{b} ==function(a){b}
    get(url).then(resp=>{
      //es6箭头函数没有this指向--this指向vue实例
      this.carousels=resp.data;
    })
    }
  
  }
}
</script>

<style lang="scss">

//体部样式
.content {
  background-color: #52f0b1;
  .carousel {
    img {
      width: 100%;
    }
  }
  .plates {
     & > .wrapper::after {
        display: block;
        content: "";
        clear: both;
      }
    .plate {
     
      float: left;
      width: 32.5%;
      height: 300px;
      background-color: #11cedb;
      margin-right: 1.25%;
      margin-bottom: 0.8em;
      ul.list > li {
        line-height: 3em;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      ul > li:hover {
        color: #028b39;
        cursor: pointer;
      }
      .head {
        display: flex;
        justify-content: space-between;
        .title {
          font-size: 18px;
          font-weight: bold;
          color: #028b39;
          cursor: pointer;
        }
        .more {
          color: #999;
          cursor: pointer;
        }
      }
    }
    .plate:nth-child(3n) {
      margin-right: 0;
    }
  }
}

</style>